<template>
  <div class="table">
    <div class="handle-box financing_box">
      <div class="handle-filter clearfix">
        <div class="fl">
          <div class="filter-item">
            <el-form :inline="true" :model="formTime" class="demo-form-inline">
              <el-form-item label="按月查询：" class="mr20">
                <el-select v-model="formTime.date" placeholder="按月查询">
                  <el-option label="suv" value="shanghai"></el-option>
                  <el-option label="轿车" value="beijing"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="按时间查询：">
                <el-date-picker
                v-model="formTime.time"
                type="datetimerange"
                align="right"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :default-time="['00:00:00', '23:59:59']"
                ></el-date-picker>
              </el-form-item>
              <el-form-item>
                <el-button type="primary">搜索</el-button>
                <el-button type="info" plain>清空</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <div class="fr">
          <div class="filter-item filter-item-last">
            <el-button type="primary">导出Excel</el-button>
          </div>
        </div>
      </div>
    </div>
    <div class="financing_cont">
      <div class="financing_total flex theme_bg">
          <div class="order_t_item" v-for="(item, index) in total" :key="index">
              <div>{{item.name}}</div>
              <div>{{item.value}}</div>
          </div>
      </div>
      <el-table
        :data="tableData"
        border
        class="table"
        ref="multipleTable"
      >
        <el-table-column prop="id" label="序号" width="80" align="center">
          <template slot-scope="scope">
              {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="日期" width="140"></el-table-column>
        <el-table-column prop="totalPrice" label="订单总金额"></el-table-column>
        <el-table-column prop="totalSum" label="订单总笔数"></el-table-column>
        <el-table-column prop="noUse" label="待使用"></el-table-column>
        <el-table-column prop="noOrder" label="待接单"></el-table-column>
        <el-table-column prop="noDeliver" label="待发货"></el-table-column>
        <el-table-column prop="noVerify" label="待核销"></el-table-column>
        <el-table-column prop="verified" label="已核销"></el-table-column>
        <el-table-column prop="cancelNum" label="已取消"></el-table-column>
        <el-table-column prop="maxPrice" label="单笔订单最高金额"></el-table-column>
        <el-table-column prop="minPrice" label="单笔订单最低金额"></el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      formTime: {
        date: "",
        time: ""
      },
      total: [
          {
              name: '订单总笔数',
              value: '131笔'
          },
          {
              name: '订单总金额',
              value: '2324.21元'
          }
      ],
      tableData: [
        {
          id: 1,
          createTime: "2019-05-04",
          totalPrice: 56443.72,
          totalSum: 454,
          noUse: 453,
          noOrder: 454,
          noDeliver: 454,
          noVerify: 454,
          verified: 454,
          cancelNum: 454,
          maxPrice: 454,
          minPrice: 454
        }
      ]
    };
  },
};
</script>

<style scoped lang="scss">

</style>